<template>
  <div class="single-correct-container">
    <CorrectHeader
      :question-info="questionList[questionIndex]"
      :task-info="correctInfo"
      :currentAnswer="currentAnswer"
      v-model:classId="correctInfo.classId"
    />
    <main class="container flex">
      <QuestionList
        :question-list="questionList"
        v-model:questionIndex="questionIndex"
        v-model:isUpdateIndex="isUpdateIndex"
      />
      <CorrectionBox
        :question-info="questionList[questionIndex]"
        :task-info="correctInfo"
        @update-current-answer="updateCurrentAnswer"
        @update-question-list="getTaskTopicInfo"
      />
    </main>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue'
import { useRoute } from 'vue-router'
import { getTaskTopic } from '@/apis/single-correct'
import { getTaskInfoById } from '@/apis/assignment/index'
import QuestionList from './components/QuestionList.vue'
import CorrectionBox from './components/CorrectionBox.vue'
import CorrectHeader from './components/CorrectionHeader.vue'
import { QUESTION_ITEM_TYPE } from './data'

const route = useRoute()

const correctInfo = ref({
  taskId: '',
  classList: [],
  classId: '',
  correctType: 1 // 任务的批改方式
})
const questionList = ref([]) // 题目列表

const questionIndex = ref(null) // 当前激活的题目索引
const isUpdateIndex = ref(true)

const currentAnswer = ref()
const updateCurrentAnswer = value => {
  currentAnswer.value = value
}
/**
 * 获取该任务的题目信息
 */
const getTaskTopicInfo = async (isUpdate = true) => {
  isUpdateIndex.value = isUpdate
  questionList.value = []
  const res = await getTaskTopic({
    task_id: correctInfo.value.taskId,
    class_id: correctInfo.value.classId
  })
  if (!res.data) return
  res.data.forEach((question, index) => {
    question.questionText = `题${index + 1}`
    question.itemType = QUESTION_ITEM_TYPE.BIG_ITEM // itemType 1-大题/单题 2-小题
    questionList.value.push(question)

    if (question.sub_question_info) {
      let list = question.sub_question_info.map((subQuestion, subIndex) => ({
        ...subQuestion,
        itemType: QUESTION_ITEM_TYPE.SMALL_ITEM,
        questionText: `${index + 1}.${subIndex + 1}`,
        question_detail: {
          ...question.question_detail,
          subproblem: [
            {
              ...question.question_detail.subproblem[subIndex]
            }
          ]
        }
      }))
      questionList.value.push(...list)
    }
  })
}

const getTaskInfoByIdInfo = async () => {
  const res = await getTaskInfoById({
    task_id: correctInfo.value.taskId
  })
  let data = res.data
  correctInfo.value = {
    taskId: data.task_id,
    correctType: data.correct_type,
    classList: data.class_info.map(item => ({
      value: item.id,
      label: `${item.grade_name}${item.name}`
    })),
    classId: null
  }
  if (correctInfo.value.classList.length) {
    correctInfo.value.classId = correctInfo.value.classList[0].value
  }
}
watchEffect(() => {
  if (!correctInfo.value.taskId || !correctInfo.value.classId) return
  getTaskTopicInfo()
})
const initData = async () => {
  correctInfo.value.taskId = route.query.taskId
  await getTaskInfoByIdInfo()
}

initData()
</script>

<style scoped lang="less">
.single-correct-container {
  height: 100vh;
  .container {
    align-items: flex-start;
    gap: 28px;
    padding: 20px;
    height: calc(100vh - 120px);
    overflow: hidden;
  }
}
</style>
